<!--if it sees the object it will show the result, else it prompt the user to go back-->
<div *ngIf="text;  else elseBlock">
	<div class="row">
		<div class="col-6 col-sm-7">
			<h1 class="font-responsive">Text Statistics</h1>
		</div>

		<div class="col-6 col-sm-5" (window:resize)="onResize($event)">
			<div class="float-right">
				<button type="button" class="btn btn-warning" (click)="backClicked()">
					<i class="fa fa-step-backward" aria-hidden="true"></i>{{backLabel}}</button>
				<button type="button" class="btn btn-success" [routerLink]="['/enhanced-text-result']">
					<i class="fa fa-file-text" aria-hidden="true"></i> {{enhanceTextLabel}} </button>
			</div>
		</div>
	</div>
	<hr>

	<div *ngIf="showDiv">

		<!--Readability Score-->
		<div class="card" style="margin: auto; margin-bottom: 3%; margin-top: 3%;">
			<h3 class="card-header">Readability Scores
			</h3>

			<div class="card-block">
				<div [ngSwitch]="true" style=" margin-bottom: 2%">
					<div *ngSwitchCase="text.fleschReadingScore > 79">
						<ngb-progressbar type="primary" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
							<i>
								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
							</i>
						</ngb-progressbar>
					</div>
					<div *ngSwitchCase="text.fleschReadingScore > 69 && text.fleschReadingScore < 80">
						<ngb-progressbar type="success" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
							<i>
								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
							</i>
						</ngb-progressbar>
					</div>
					<div *ngSwitchCase="text.fleschReadingScore < 30">
						<ngb-progressbar type="danger" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
							<i>
								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
							</i>
						</ngb-progressbar>
					</div>
					<div *ngSwitchDefault>
						<ngb-progressbar type="warning" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
							<i>
								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
							</i>
						</ngb-progressbar>
					</div>
				</div>


				<p>
					<Strong>Total Readability Level: </Strong>
					<strong [class]="textColor" style="font-size: 20px; font-weight: bold;">{{text.fleschReadingScore | number:'1.0-2'}}</strong>
				</p>
				<p>
					<Strong>The text is appropriate for: </Strong>
					<strong [class]="textColor" style="font-size: 20px; font-weight: bold;">{{textLVL}}</strong>
				</p>

			</div>
		</div>

		<!--Text Statistic-->
		<div class="card">
			<h3 class="card-header">Statistics</h3>
			<div class="card-block">
				<table class="table table-bordered" style="margin-bottom: 3%;">
					<thead class="thead-default">
						<tr>
							<th>#</th>
							<th>Word Count</th>
							<th>Percentage</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th scope="row">AWL</th>
							<td>{{text.statistics.wordCount.awl}}</td>
							<td>{{(text.statistics.wordPercentage.awl * 100) | number:'1.0-2'}}%</td>
						</tr>
						<tr>
							<th scope="row">High Freq.</th>
							<td>{{text.statistics.wordCount.hi}}</td>
							<td>{{(text.statistics.wordPercentage.hi * 100) | number:'1.0-2'}}%</td>
						</tr>
						<tr>
							<th scope="row">Medium Freq.</th>
							<td>{{text.statistics.wordCount.med}}</td>
							<td>{{(text.statistics.wordPercentage.med * 100) | number:'1.0-2'}}%</td>
						</tr>
						<tr>
							<th scope="row">Low Freq.</th>
							<td>{{text.statistics.wordCount.low}}</td>
							<td>{{(text.statistics.wordPercentage.low * 100) | number:'1.0-2'}}%</td>
						</tr>
						<tr>
							<th scope="row">Names & off-list</th>
							<td>{{text.statistics.wordCount.noCategory}}</td>
							<td>{{(text.statistics.wordPercentage.noCategory * 100) | number:'1.0-2'}}%</td>
						</tr>
					</tbody>
				</table>

				<table class="table table-bordered">
					<thead class="thead-default">
						<tr>
							<th>#</th>
							<th>Words</th>
							<th>Sentences</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th scope="row">Total</th>
							<td>{{text.statistics.wordCount.total}}</td>
							<td>{{text.sentenceCount}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>




		<div class="row" style="margin-top: 3%;">
			<div class="col col-md-6">
				<div class="card mb-3">
					<div class="card-header">
						<i class="fa fa-fw fa-bar-chart fa-2x float-right"></i>
						Bar Chart (#)
					</div>
					<div class="card-body">
						<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
						 [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
						</canvas>
					</div>
				</div>
			</div>
			<div class="col col-md-6">
				<div class="card mb-3">
					<div class="card-header">
						<i class="fa fa-fw fa-pie-chart fa-2x float-right"></i>
						Pie Chart (%)
					</div>
					<div class="card-body">
						<canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" (chartHover)="chartHovered($event)"
						 (chartClick)="chartClicked($event)"></canvas>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

<!--if page refreshes it prompt the user to go to the previous page-->
<ng-template #elseBlock>
	<div class="row">
		<!-- <meta http-equiv="refresh" content="0;url=http://www.myvirs.com/dashboard" /> -->
		<div class="col-6">
			<h1>Oops!</h1>
		</div>
		<div class="col-6" (window:resize)="onResize($event)">
			<div class="float-right">
				<button type="button" class="btn btn-warning" (click)="backClicked()">
					<i class="fa fa-step-backward" aria-hidden="true"></i> {{backLabel}}</button>
			</div>
		</div>
	</div>
	<hr>

	<div>
		<h4> Redirecting to homepage in 3 seconds...</h4>
	</div>

</ng-template>